<template>
  <div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <!-- 初始化 -->
        <el-button type="primary" icon="el-icon-pie-chart" plain size="mini" @click="initData">
          <!-- 初始化 -->
          {{ $t('初始化') }}
        </el-button>
      </el-col>
      <!-- 展开/折叠 -->
      <el-col :span="1.5">
        <el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">
          <!-- 展开/折叠 -->
          {{ $t('展开/折叠') }}
        </el-button>
      </el-col>
    </el-row>

    <el-table
      height="620"
      node-key="type"
      row-key="id"
      ref="treeNode"
      :expand-row-keys="expandRowKeys"
      v-loading="loading"
      :data="tableData"
      @selection-change="handleSelectionChange"
    >
      <!-- 展开 -->
      <el-table-column type="expand" width="100" :label="$t('展开')">
        <template slot-scope="props">
          <el-table ref="TableRef" :data="props.row.child" height="500" row-key="id" :expand-row-keys="expandRowKeys">
            <!-- 展开 -->
            <el-table-column type="expand" :label="$t('展开')" width="360">
              <template slot-scope="scope">
                <el-table ref="TableRef" :data="scope.row.child">
                  <!-- 地址 -->
                  <el-table-column
                    align="center"
                    show-overflow-tooltip
                    prop="address1"
                    :label="$t('地址')"
                    :show-overflow-tooltip="true"
                  >
                  </el-table-column>

                  <!-- 三边尺寸 -->
                  <el-table-column
                    align="center"
                    show-overflow-tooltip
                    :label="$t('三边尺寸')"
                    prop="trilateralSize"
                    :show-overflow-tooltip="true"
                  >
                  </el-table-column>

                  <!-- 重量（g） -->
                  <el-table-column
                    align="center"
                    show-overflow-tooltip
                    prop="weight"
                    :label="$t('重量') + '(g)'"
                    :show-overflow-tooltip="true"
                  >
                  </el-table-column>

                  <!-- 价格 -->
                  <el-table-column
                    align="center"
                    show-overflow-tooltip
                    :label="$t('价格') + '(JPY)'"
                    prop="price"
                    :show-overflow-tooltip="true"
                  >
                  </el-table-column>

                  <!-- 包裹份数 -->
                  <el-table-column
                    align="center"
                    show-overflow-tooltip
                    prop="packageNum"
                    :label="$t('包裹份数')"
                    :show-overflow-tooltip="true"
                  >
                  </el-table-column>

                  <!-- 	捆包费用 -->
                  <el-table-column
                    show-overflow-tooltip
                    prop="bundleFee"
                    :label="$t('捆包费用') + '(JPY)'"
                    align="center"
                  >
                    <!-- <template slot-scope="{row}">

                                            <span style="cursor: pointer; color:#1890ff;" @click="changePrice(row)">{{
                                                row.bundleFee }}</span>
                                        </template> -->
                  </el-table-column>

                  <!-- 时效 -->
                  <el-table-column
                    align="center"
                    show-overflow-tooltip
                    :label="$t('时效')"
                    prop="time"
                    :show-overflow-tooltip="true"
                  >
                  </el-table-column>

                  <!-- 状态 -->
                  <el-table-column
                    align="center"
                    show-overflow-tooltip
                    prop="isFast"
                    :label="$t('状态')"
                    :show-overflow-tooltip="true"
                  >
                    <template slot-scope="{ row }">
                      <span v-if="row.enable == 1" style="color: rgb(31, 167, 42)">
                        <!-- 启用 -->
                        {{ $t('启用') }}
                      </span>
                      <span v-if="row.enable == 0" style="color: red">
                        <!-- 禁用 -->
                        {{ $t('禁用') }}
                      </span>
                    </template>
                  </el-table-column>

                  <!-- 是否快递 -->
                  <el-table-column align="center" show-overflow-tooltip :label="$t('是否快递')" prop="isFast">
                    <template slot-scope="{ row }">
                      <span v-if="row.isFast == 0">
                        <!-- 普通 -->
                        {{ $t('普通') }}
                      </span>
                      <span v-if="row.isFast == 1">
                        <!-- 快递 -->
                        {{ $t('快递') }}
                      </span>
                    </template>
                  </el-table-column>
                  <!-- 操作 -->
                  <el-table-column fixed="right" :label="$t('操作')" :width="calWidth(200, 250, 200)" align="center">
                    <template slot-scope="{ row }" v-hasPermi="['distribution:express:edit']">
                      <span @click="open(row)" style="cursor: pointer; color: #1890ff; margin-right: 6px">
                        <!-- 修改价格 -->
                        {{ $t('修改价格') }}
                      </span>

                      <span @click="changePrice(row)" style="cursor: pointer; color: #1890ff; margin-right: 6px">
                        <!-- 捆包费用 -->
                        {{ $t('捆包费用') }}
                      </span>

                      <!-- confirm-button-text="确认" cancel-button-text="取消" -->
                      <!-- 是否启用 -->
                      <el-popconfirm
                        v-if="row.enable == 0"
                        @confirm="isconfirm(row, 1)"
                        icon="el-icon-info"
                        icon-color="#1890ff"
                        :title="$t('是否启用?')"
                      >
                        <span slot="reference" style="cursor: pointer; color: #1890ff">
                          <!-- 启用 -->
                          {{ $t('启用') }}
                        </span>
                      </el-popconfirm>
                      <!-- confirm-button-text="确认" cancel-button-text="取消" -->
                      <!-- 是否禁用 -->
                      <el-popconfirm
                        v-if="row.enable == 1"
                        @confirm="isconfirm(row, 0)"
                        icon="el-icon-info"
                        icon-color="red"
                        :title="$t('是否禁用?')"
                      >
                        <span slot="reference" style="cursor: pointer; color: #1890ff">
                          <!-- 禁用 -->
                          {{ $t('禁用') }}
                        </span>
                      </el-popconfirm>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <!-- 地址 -->
            <el-table-column
              align="center"
              show-overflow-tooltip
              prop="address1"
              :label="$t('地址')"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <!-- 快递方式 -->
      <el-table-column show-overflow-tooltip prop="id" :label="$t('快递方式')" align="center"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { expressDistrictInit, expressDistrict, expressDistrictTable } from '@/api/platform/express'
export default {
  activated() {
    this.$nextTick(() => this.$refs['treeNode']?.doLayout())
  },
  data() {
    return {
      loading: false,
      tableData: [],
      isExpandAll: false,
      refreshTable: true,
      expandRowKeys: [],
    }
  },
  props: {
    FormData: {
      type: Object,
      default: {},
    },
  },
  mounted() {
    console.log(this.FormData)
    this.getExpressDistrictTable()
  },
  watch: {
    FormData: function (newV) {
      this.getExpressDistrictTable()
    },
  },
  methods: {
    findChildID(child) {
      child.forEach((element) => {
        this.expandRowKeys.push(element.id)
      })
      child[0].child.forEach((element) => {
        this.expandRowKeys.push(element.id)
      })
      child[1].child.forEach((element) => {
        this.expandRowKeys.push(element.id)
      })
    },
    /** 展开/折叠操作 */
    toggleExpandAll() {
      this.isExpandAll = !this.isExpandAll
      if (this.isExpandAll) {
        this.findChildID(this.tableData)
      } else {
        this.expandRowKeys = []
      }
    },
    isconfirm(data, type) {
      expressDistrict({
        list: [{ id: data.id, price: data.price, enable: type }],
      }).then((res) => {
        this.$message({
          type: 'success',
          message: res.msg,
        })
        this.getExpressDistrictTable()
      })
    },
    open(data) {
      this.$prompt('', '修改价格(JPY)', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[1-9]\d*(\.\d+)?$/,
        inputErrorMessage: '请不要输入除数字和小数以外字符',
        inputValue: Number(data.price),
        closeOnClickModal: false,
      })
        .then(({ value }) => {
          expressDistrict({
            list: [{ id: data.id, price: Number(value), enable: data.enable }],
          }).then((res) => {
            this.$message({
              type: 'success',
              message: res.msg,
            })
            this.getExpressDistrictTable()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入',
          })
        })
    },
    /**修改捆包费用 */
    changePrice(data) {
      this.$prompt('', '修改捆包费用(JPY)', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[1-9]\d*(\.\d+)?$/,
        inputErrorMessage: '请不要输入除数字和小数以外字符',
        inputValue: Number(data.bundleFee),
      })
        .then(({ value }) => {
          expressDistrict({
            list: [{ id: data.id, bundleFee: Number(value), enable: data.enable }],
          }).then((res) => {
            this.$message({
              type: 'success',
              message: res.msg,
            })
          })
          this.getExpressDistrictTable()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入',
          })
        })
    },
    handleSelectionChange() {},
    /**获取初始化后的数据 */
    getExpressDistrictTable() {
      expressDistrictTable({ distrId: this.FormData.distrId }).then((res) => {
        let backData = []
        for (const key in res.data) {
          backData.push({
            child: res.data[key],
            id: key,
          })
        }
        this.tableData = backData
      })
    },
    initData(value) {
      this.$confirm(this.$t('确认初始化?'), this.$t('提示'), {
        type: 'warning',
      }).then(() => {
        expressDistrictInit({ distrId: this.FormData.distrId }).then((res) => {
          this.$message({ type: 'success', message: res.msg })
          this.getExpressDistrictTable()
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-table--medium .el-table__cell {
  padding: 4px !important;
}

::v-deep .el-table .el-table__cell {
  padding: 4px !important;
}
</style>
